<template>
  <div class="profile-container">
    <!-- 儿童选择器 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :span="24">
        <el-card class="children-selector">
          <div class="selector-header">
            <el-select
              v-model="currentChildId"
              placeholder="请选择儿童"
              @change="handleChildChange"
            >
              <el-option
                v-for="child in children"
                :key="child.id"
                :label="child.name"
                :value="child.id"
              >
                <div class="child-option">
                  <el-avatar :size="30" :src="child.avatar" />
                  <span class="child-name">{{ child.name }}</span>
                  <span class="child-age">{{ child.age }}岁</span>
                </div>
              </el-option>
            </el-select>
            <el-button type="primary" @click="handleAddChild">添加儿童</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 儿童信息展示区域 -->
    <template v-if="currentChildId">
      <el-row :gutter="20">
        <!-- 基本信息 -->
        <el-col :span="8">
          <el-card class="profile-card">
            <template #header>
              <div class="card-header">
                <span>基本信息</span>
                <el-button type="primary" text @click="handleEdit">编辑</el-button>
              </div>
            </template>
            <div class="profile-content">
              <div class="avatar-wrapper">
                <el-avatar :size="100" :src="currentChild.avatar" />
                <h3>{{ currentChild.name }}</h3>
              </div>
              <el-descriptions :column="1" border>
                <el-descriptions-item label="性别">{{ currentChild.gender }}</el-descriptions-item>
                <el-descriptions-item label="年龄">{{ currentChild.age }}岁</el-descriptions-item>
                <el-descriptions-item label="出生日期">
                  {{ formatDate(currentChild.birthday) }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
        </el-col>

        <!-- 生长记录 -->
        <el-col :span="16">
          <el-card class="growth-card">
            <template #header>
              <div class="card-header">
                <span>生长记录</span>
              </div>
            </template>
            <div class="growth-content">
              <el-table :data="growthRecords" stripe style="width: 100%">
                <el-table-column prop="date" label="日期" width="180">
                  <template #default="scope">
                    {{ new Date(scope.row.date).toLocaleDateString() }}
                  </template>
                </el-table-column>
                <el-table-column prop="height" label="身高(cm)" width="180" align="center" />
                <el-table-column prop="weight" label="体重(kg)" width="180" align="center" />
                <el-table-column prop="bmi" label="BMI" min-width="180" align="center">
                  <template #default="scope">
                    {{ (scope.row.weight / Math.pow(scope.row.height / 100, 2)).toFixed(1) }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 健康记录 -->
      <el-row :gutter="20" class="mt-20">
        <el-col :span="24">
          <el-card class="health-card">
            <template #header>
              <div class="card-header">
                <span>健康记录</span>
                <el-radio-group v-model="activeTab" size="small">
                  <el-radio-button label="vaccine">疫苗接种</el-radio-button>
                  <el-radio-button label="illness">疾病史</el-radio-button>
                  <el-radio-button label="checkup">体检记录</el-radio-button>
                  <el-radio-button label="alert">健康提醒</el-radio-button>
                </el-radio-group>
              </div>
            </template>
            
            <div class="health-content">
              <!-- 疫苗接种记录 -->
              <div v-if="activeTab === 'vaccine'" class="vaccine-list">
                <el-timeline>
                  <el-timeline-item
                    v-for="vaccine in vaccineRecords"
                    :key="vaccine.id"
                    :timestamp="new Date(Number(vaccine.vaccineDate)).toLocaleDateString()"
                    :type="vaccine.status === 1 ? 'success' : 'warning'"
                  >
                    <h4>{{ vaccine.vaccineName }}</h4>
                    <p>状态: {{ formatVaccineStatus(vaccine.status) }}</p>
                    <p v-if="vaccine.nextDate">下次接种: {{ new Date(Number(vaccine.nextDate)).toLocaleDateString() }}</p>
                  </el-timeline-item>
                </el-timeline>
              </div>

              <!-- 体检记录 -->
              <div v-if="activeTab === 'checkup'" class="checkup-list">
                <el-row :gutter="20">
                  <el-col :span="8" v-for="record in checkupRecords" :key="record.id">
                    <el-card class="checkup-card mb-20" :class="{ 'pending': record.status === 0 }">
                      <div class="checkup-card-header">
                        <div class="checkup-type">
                          <el-tag :type="record.status === 0 ? 'warning' : 'success'" effect="dark">
                            {{ formatCheckupStatus(record.status) }}
                          </el-tag>
                          <h3>{{ record.checkupType }}</h3>
                        </div>
                        <div class="checkup-date">
                          {{ new Date(Number(record.appointmentTime)).toLocaleDateString() }}
                        </div>
                      </div>
                      <div class="checkup-card-content">
                        <el-button 
                          type="primary" 
                          :icon="View"
                          @click="handleViewCheckupDetail(record)"
                          text
                        >
                          查看详情
                        </el-button>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>

              <!-- 体检详情对话框 -->
              <el-dialog
                v-model="checkupDetailVisible"
                :title="currentCheckup?.checkupType + '详情'"
                width="800px"
              >
                <div v-loading="detailLoading">
                  <el-descriptions :column="3" border>
                    <el-descriptions-item label="体检日期">
                      {{ currentCheckup ? new Date(Number(currentCheckup.appointmentTime)).toLocaleDateString() : '' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="体检类型">
                      {{ currentCheckup?.checkupType }}
                    </el-descriptions-item>
                    <el-descriptions-item label="状态">
                      {{ currentCheckup ? formatCheckupStatus(currentCheckup.status) : '' }}
                    </el-descriptions-item>
                  </el-descriptions>

                  <div class="detail-table mt-20">
                    <el-table :data="checkupDetails" stripe style="width: 100%">
                      <el-table-column prop="itemName" label="检查项目" min-width="120" />
                      <el-table-column prop="itemValue" label="检查结果" min-width="100">
                        <template #default="scope">
                          <span :class="{ 'text-danger': scope.row.isAbnormal }">
                            {{ scope.row.itemValue }}{{ scope.row.unit ? ' ' + scope.row.unit : '' }}
                          </span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="referenceRange" label="参考范围" min-width="120" />
                      <el-table-column prop="doctorComment" label="医生建议" min-width="200" />
                    </el-table>
                  </div>
                </div>
              </el-dialog>

              <!-- 健康提醒 -->
              <div v-if="activeTab === 'alert'" class="alert-list">
                <el-timeline>
                  <el-timeline-item
                    v-for="alert in healthAlerts"
                    :key="alert.id"
                    :timestamp="new Date(Number(alert.alertTime)).toLocaleDateString()"
                    :type="alert.type === 'warning' ? 'danger' : 'info'"
                  >
                    <h4>{{ formatAlertType(alert.type) }}</h4>
                    <p>{{ alert.message }}</p>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </template>

    <!-- 未选择儿童时的提示 -->
    <el-empty
      v-else
      description="请先选择或添加儿童"
      :image-size="200"
    >
      <el-button type="primary" @click="handleAddChild">添加儿童</el-button>
    </el-empty>

    <!-- 添加儿童对话框 -->
    <el-dialog
      v-model="addChildDialogVisible"
      title="添加儿童"
      width="500px"
    >
      <el-form  ref="childFormRef" :model="childForm" label-width="100px" :rules="childFormRules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="childForm.name" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="childForm.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker
            v-model="childForm.birthday"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addChildDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveChild">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑儿童信息对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑儿童信息"
      width="500px"
    >
      <el-form :model="editForm" label-width="100px">
        <!-- 添加头像上传 -->
        <el-form-item label="头像">
          <div class="avatar-uploader">
            <el-upload
              class="avatar-uploader"
              :http-request="handleAvatarUpload"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
            >
              <el-avatar
                v-if="editForm.avatar"
                :src="editForm.avatar"
                :size="100"
                fit="cover"
              />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="editForm.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker
            v-model="editForm.birthday"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveEdit" :loading="editLoading">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加生长记录对话框 -->
    <el-dialog
      v-model="addGrowthDialogVisible"
      title="添加生长记录"
      width="500px"
    >
      <el-form :model="growthForm" label-width="100px">
        <el-form-item label="日期" required>
          <el-date-picker
            v-model="growthForm.date"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="身高(cm)" required>
          <el-input-number
            v-model="growthForm.height"
            :precision="2"
            :step="0.1"
            :min="0"
          />
        </el-form-item>
        <el-form-item label="体重(kg)" required>
          <el-input-number
            v-model="growthForm.weight"
            :precision="2"
            :step="0.1"
            :min="0"
          />
        </el-form-item>
        <el-form-item label="营养状况">
          <el-input v-model="growthForm.nutritionStatus" />
        </el-form-item>
        <el-form-item label="生长评估">
          <el-input
            v-model="growthForm.growthAssessment"
            type="textarea"
            rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addGrowthDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveGrowth">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { getChildList,addChild } from '@/api/child'
import { ElMessage } from 'element-plus'
import { getToken, isLoggedIn } from '@/utils/auth'
import { get, post } from '@/utils/request'
import { Plus } from '@element-plus/icons-vue'
import {uploadAvatar, uploadImg} from "@/api/user.js";
// 儿童列表
const children = ref([])
const currentChildId = ref(null)
const loading = ref(false)

// 当前儿童的完整档案信息
const profileData = ref(null)

// 获取儿童列表
const fetchChildren = async () => {
  try {
    if (!isLoggedIn()) {
      ElMessage.warning('用户未登录或登录已过期，请重新登录')
      return
    }

    loading.value = true
    const res = await getChildList()
    
    children.value = res.map(child => ({
      id: child.id,
      name: child.name,
      gender: child.gender,
      age: child.age,
      birthday: child.birthday,
      avatar: child.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }))
    
    // 如果有儿童，默认选中第一个并获取其档案信息
    if (children.value.length > 0 && !currentChildId.value) {
      currentChildId.value = children.value[0].id
      await fetchChildProfile(children.value[0].id)
    }
  } catch (error) {
    console.error('获取儿童列表失败:', error)
    ElMessage.error('获取儿童列表失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 获取儿童档案信息
const fetchChildProfile = async (childId) => {
  try {
    loading.value = true
    const res = await get(`/user/child/profile/${childId}`)
    profileData.value = res
    
    // 更新各个数据列表
    growthRecords.value = res.growthRecords || []
    vaccineRecords.value = res.vaccineRecords || []
    checkupRecords.value = res.checkupRecords || []
    healthAlerts.value = res.healthAlerts || []
    
  } catch (error) {
    console.error('获取儿童档案信息失败:', error)
    ElMessage.error('获取儿童档案信息失败')
  } finally {
    loading.value = false
  }
}

// 当前选中的儿童信息
const currentChild = computed(() => 
  profileData.value || children.value.find(child => child.id === currentChildId.value) || null
)

// 各个记录的响应式引用
const growthRecords = ref([])
const vaccineRecords = ref([])
const checkupRecords = ref([])
const healthAlerts = ref([])

// 当前激活的健康记录标签
const activeTab = ref('vaccine')

// 添加儿童对话框
const addChildDialogVisible = ref(false)
const childForm = reactive({
  name: '',
  gender: '男',
  birthday: '',
  allergies: ''
})

// 添加儿童表单验证规则
const childFormRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  birthday: [
    { required: true, message: '请选择出生日期', trigger: 'change' }
  ]
}
// 编辑对话框
const editDialogVisible = ref(false)
const editForm = reactive({
  name: '',
  gender: '',
  birthday: '',
  allergies: '',
  avatar: ''
})

// 添加生长记录对话框
const addGrowthDialogVisible = ref(false)
const growthForm = reactive({
  date: new Date(),
  height: '',
  weight: '',
  nutritionStatus: '',
  growthAssessment: ''
})

// 体检详情相关
const checkupDetailVisible = ref(false)
const detailLoading = ref(false)
const currentCheckup = ref(null)
const checkupDetails = ref([])

// 编辑相关状态
const editLoading = ref(false)

// 头像上传前的验证
const beforeAvatarUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('只能上传图片文件！')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB！')
    return false
  }
  return true
}

// 处理头像上传
const handleAvatarUpload = async ({ file }) => {
  try {
    // 生成文件路径
    const fileName = `children/avatars/${Date.now()}-${file.name}`
    // 上传到OSS
    const url = await uploadAvatar(file, fileName)
    // 更新表单数据
    editForm.avatar = url
    ElMessage.success('头像上传成功')
  } catch (error) {
    console.error('头像上传失败:', error)
    ElMessage.error('头像上传失败，请重试')
  }
}

// 处理保存编辑
const handleSaveEdit = async () => {
  if (!currentChildId.value) return
  
  editLoading.value = true
  try {
    const data = {
      id: currentChildId.value,
      name: editForm.name,
      gender: editForm.gender,
      birthday: editForm.birthday,
      avatar: editForm.avatar,
      allergies: editForm.allergies
    }
    
    await post('/user/child/update', data)
    ElMessage.success('保存成功')
    editDialogVisible.value = false
    // 重新获取儿童信息
    await fetchChildProfile(currentChildId.value)
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败，请重试')
  } finally {
    editLoading.value = false
  }
}

// 处理儿童切换
const handleChildChange = async (childId) => {
  currentChildId.value = childId
  if (childId) {
    await fetchChildProfile(childId)
  }
}

// 处理添加儿童
const handleAddChild = () => {
  addChildDialogVisible.value = true
}
const childFormRef = ref(null)
// 处理保存新儿童
const handleSaveChild = async () => {
  // 验证表单
  if (!childFormRef.value) return
  try {
    await childFormRef.value.validate()
  } catch (error) {
    console.log('表单验证失败', error)
    return
  }

  try {
    const res = await addChild({
      name: childForm.name,
      gender: childForm.gender,
      birthday: childForm.birthday.getTime(),
      // 以下字段根据实际需求添加
    })

    ElMessage.success('儿童添加成功')
    addChildDialogVisible.value = false

    // 重置表单
    childFormRef.value.resetFields()

    // 刷新列表并选中新儿童
    await fetchChildren()
  } catch (error) {
    console.error('添加儿童失败:', error)
    ElMessage.error('添加失败: ' + (error.message || '请稍后重试'))
  }
}

// 处理编辑儿童信息
const handleEdit = () => {
  if (currentChild.value) {
    Object.assign(editForm, currentChild.value)
    editDialogVisible.value = true
  }
}

// 处理添加生长记录
const handleAddGrowth = () => {
  growthForm.date = new Date()
  growthForm.height = ''
  growthForm.weight = ''
  growthForm.nutritionStatus = ''
  growthForm.growthAssessment = ''
  addGrowthDialogVisible.value = true
}

// 保存生长记录
const handleSaveGrowth = async () => {
  try {
    if (!growthForm.date || !growthForm.height || !growthForm.weight) {
      ElMessage.warning('请填写完整的记录信息')
      return
    }

    const data = {
      childId: currentChildId.value,
      recordTime: growthForm.date,
      height: growthForm.height,
      weight: growthForm.weight,
      nutritionStatus: growthForm.nutritionStatus,
      growthAssessment: growthForm.growthAssessment
    }

    await post('/user/growth/add', data)
    ElMessage.success('添加记录成功')
    addGrowthDialogVisible.value = false
    await fetchChildProfile(currentChildId.value)
  } catch (error) {
    console.error('添加记录失败:', error)
    ElMessage.error('添加记录失败，请稍后重试')
  }
}

// 格式化疫苗状态
const formatVaccineStatus = (status) => {
  return status === 1 ? '已接种' : '待接种'
}

// 格式化体检状态
const formatCheckupStatus = (status) => {
  switch (status) {
    case 0: return '待体检'
    case 1: return '已完成'
    case 2: return '已取消'
    default: return '未知'
  }
}

// 格式化提醒类型
const formatAlertType = (type) => {
  switch (type) {
    case 'vaccine': return '疫苗'
    case 'checkup': return '体检'
    case 'growth': return '生长评估'
    case 'warning': return '警告'
    default: return '其他'
  }
}

// 添加生长记录相关的处理方法
const handleEditGrowth = (row) => {
  // TODO: 实现编辑生长记录功能
  console.log('编辑生长记录:', row)
}

const handleDeleteGrowth = async (row) => {
  try {
    await ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await post(`/user/growth/delete/${row.id}`)
    ElMessage.success('删除成功')
    // 刷新记录列表
    await fetchChildProfile(currentChildId.value)
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败，请稍后重试')
    }
  }
}

// 查看体检详情
const handleViewCheckupDetail = async (checkup) => {
  console.log('当前选中的体检记录:', checkup)
  console.log('体检记录ID:', checkup.id)
  currentCheckup.value = checkup
  checkupDetailVisible.value = true
  await fetchCheckupDetail(checkup.id)
}

// 获取体检详情
const fetchCheckupDetail = async (checkupId) => {
  console.log('请求体检详情的ID:', checkupId)
  try {
    detailLoading.value = true
    const res = await get(`/user/checkupDetail/childinfo?checkupId=${checkupId}`)
    console.log('获取到的体检详情数据:', res)
    
    if (res) {
      // 后端直接返回详情对象，将其包装成数组
      checkupDetails.value = [res]
      console.log('处理后的体检详情数据:', checkupDetails.value)
    } else {
      checkupDetails.value = []
      ElMessage.warning('暂无体检详情数据')
    }
  } catch (error) {
    console.error('获取体检详情失败:', error)
    ElMessage.error('获取体检详情失败')
    checkupDetails.value = []
  } finally {
    detailLoading.value = false
  }
}

// 在 script setup 部分添加日期格式化函数
const formatDate = (timestamp) => {
  if (!timestamp) return '暂无数据'
  try {
    const date = new Date(Number(timestamp))
    if (isNaN(date.getTime())) {
      // 如果转换后的日期无效，尝试直接创建日期对象
      const directDate = new Date(timestamp)
      if (!isNaN(directDate.getTime())) {
        return directDate.toLocaleDateString()
      }
      return '日期格式错误'
    }
    return date.toLocaleDateString()
  } catch (error) {
    console.error('日期格式化错误:', error)
    return '日期格式错误'
  }
}

// 页面加载时获取儿童列表
onMounted(() => {
  fetchChildren()
})
</script>

<style scoped>
.profile-container {
  padding: 24px;
}

.mb-20 {
  margin-bottom: 24px;
}

.mt-20 {
  margin-top: 24px;
}

.children-selector {
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  border: none;
  color: white;
}

.selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selector-header .el-select {
  width: 200px;
}

.child-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.child-name {
  font-weight: 600;
  font-size: 16px;
}

.child-age {
  color: #909399;
  font-size: 14px;
}

.profile-card, .growth-card, .health-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.card-header span {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.profile-content {
  padding: 24px;
}

.avatar-wrapper {
  text-align: center;
  margin-bottom: 24px;
}

.avatar-wrapper h3 {
  margin: 12px 0;
  font-size: 20px;
  color: #333;
}

.growth-content,
.health-content {
  margin-top: 20px;
  padding: 0 20px 20px;
}

.vaccine-list,
.illness-list,
.checkup-list {
  margin-top: 20px;
}

:deep(.el-descriptions) {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

:deep(.el-descriptions__label) {
  width: 100px;
  color: #666;
}

:deep(.el-descriptions__content) {
  color: #333;
}

:deep(.el-timeline-item__node--normal) {
  left: -2px;
  width: 16px;
  height: 16px;
}

:deep(.el-timeline-item__wrapper) {
  padding-left: 28px;
}

.reminder-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background: #f8f9fa;
}

:deep(.el-radio-button__inner) {
  border-radius: 20px;
  padding: 8px 20px;
}

:deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-radius: 20px 0 0 20px;
}

:deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-radius: 0 20px 20px 0;
}

:deep(.el-button) {
  border-radius: 20px;
}

:deep(.el-dialog) {
  border-radius: 16px;
}

:deep(.el-dialog__header) {
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.el-dialog__body) {
  padding: 24px;
}

:deep(.el-dialog__footer) {
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
}

.text-danger {
  color: #f56c6c;
}

.detail-table {
  margin-top: 20px;
}

.checkup-card {
  height: 160px;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.checkup-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.checkup-card.pending {
  background: linear-gradient(135deg, #ffd6d6 0%, #fff3f3 100%);
}

.checkup-card-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkup-type {
  display: flex;
  align-items: center;
  gap: 12px;
}

.checkup-type h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.checkup-date {
  color: #666;
  font-size: 14px;
}

.checkup-card-content {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-tag) {
  border-radius: 12px;
  padding: 0 12px;
  height: 24px;
  line-height: 24px;
}

.avatar-uploader {
  text-align: center;
}

.avatar-uploader :deep(.el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-uploader :deep(.el-upload:hover) {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style> 